{% extends 'base.html' %}
{% load static %}

{% block title %}{{ worldcup.name }} - 对战记录 - Creeps Judge{% endblock %}

{% block extra_css %}
<link href="{% static 'css/worldcup.css' %}" rel="stylesheet">
<style>
    .container {
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: none;
        border: none;
        color: rgba(255, 255, 255, 0.9);
    }

    .page-header {
        text-align: center;
        margin-bottom: 40px;
        padding: 30px 0;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
        border-radius: 20px;
        border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .page-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: #FFD700;
        margin: 0;
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .page-subtitle {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.8);
        margin: 10px 0 0;
    }

    .breadcrumb {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        padding: 15px 20px;
        margin-bottom: 30px;
        border: 1px solid rgba(255, 215, 0, 0.2);
    }

    .breadcrumb-item {
        color: rgba(255, 255, 255, 0.7);
    }

    .breadcrumb-item a {
        color: #FFD700;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .breadcrumb-item a:hover {
        color: #FFA500;
    }

    .breadcrumb-item.active {
        color: rgba(255, 255, 255, 0.9);
    }

    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 15px;
        border: 2px solid rgba(255, 215, 0, 0.3);
        padding: 20px;
        text-align: center;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 215, 0, 0.5);
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: #FFD700;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
    }

    .filter-container {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 15px;
        border: 2px solid rgba(255, 215, 0, 0.3);
        padding: 20px;
        margin-bottom: 30px;
    }

    .filter-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        align-items: end;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group label {
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .form-control {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 8px;
        padding: 10px 12px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.9rem;
    }

    .form-control:focus {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 215, 0, 0.6);
        outline: none;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    }

    .btn-filter {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-filter:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
    }

    .btn-clear {
        background: linear-gradient(135deg, #6c757d, #5a6268);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }

    .btn-clear:hover {
        background: linear-gradient(135deg, #5a6268, #495057);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }



    .btn-refresh {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .btn-refresh:hover {
        background: linear-gradient(135deg, #1e7e34, #155724);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }

    .btn-refresh:active {
        transform: translateY(0);
    }

    .refresh-icon {
        transition: transform 0.3s ease;
    }

    .btn-refresh:hover .refresh-icon {
        transform: rotate(180deg);
    }

    .battle-card {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 15px;
        border: 2px solid rgba(255, 215, 0, 0.3);
        margin-bottom: 20px;
        padding: 20px;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .battle-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 215, 0, 0.5);
    }

    .battle-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .battle-id {
        font-size: 1.1rem;
        font-weight: 600;
        color: #FFD700;
    }

    .battle-status {
        padding: 5px 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .status-finished {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
    }

    .status-running {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #212529;
    }

    .status-pending {
        background: linear-gradient(135deg, #6c757d, #5a6268);
        color: white;
    }

    .status-error {
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: white;
    }

    .battle-players {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .player {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        min-width: 120px;
    }

    .player-name {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .player-name.player1 {
        color: #ff4757;
    }

    .player-name.player2 {
        color: #3742fa;
    }

    .player-score {
        font-size: 1.5rem;
        font-weight: 700;
        color: #FFD700;
    }

    .vs-divider {
        font-size: 1.2rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        margin: 0 10px;
    }

    .battle-result {
        text-align: center;
        margin-bottom: 15px;
    }

    .result-text {
        font-size: 1.1rem;
        font-weight: 600;
        padding: 8px 16px;
        border-radius: 12px;
        display: inline-block;
    }

    .result-player1_win {
        background: linear-gradient(135deg, #ff4757, #ff3742);
        color: white;
    }

    .result-player2_win {
        background: linear-gradient(135deg, #3742fa, #2f3542);
        color: white;
    }

    .result-draw {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #212529;
    }

    .result-error {
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: white;
    }

    .battle-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        margin-bottom: 15px;
    }

    .info-item {
        text-align: center;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 215, 0, 0.2);
    }

    .info-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 5px;
    }

    .info-value {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 600;
    }

    .battle-actions {
        text-align: center;
    }

    .btn-detail {
        background: linear-gradient(135deg, #8e44ad, #6c3483);
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-block;
    }

    .btn-detail:hover {
        background: linear-gradient(135deg, #6c3483, #5b2c6f);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }

    .pagination {
        justify-content: center;
        margin-top: 40px;
    }

    .page-link {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 215, 0, 0.3);
        color: rgba(255, 255, 255, 0.8);
        padding: 10px 15px;
        margin: 0 2px;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .page-link:hover {
        background: rgba(255, 215, 0, 0.2);
        border-color: rgba(255, 215, 0, 0.5);
        color: #FFD700;
        text-decoration: none;
    }

    .page-item.active .page-link {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        border-color: #FFD700;
        color: #000;
        font-weight: 600;
    }

    .page-item.disabled .page-link {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.3);
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        border: 2px dashed rgba(255, 215, 0, 0.3);
    }

    .empty-icon {
        font-size: 4rem;
        color: rgba(255, 215, 0, 0.5);
        margin-bottom: 20px;
    }

    .empty-title {
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 10px;
    }

    .empty-text {
        color: rgba(255, 255, 255, 0.6);
        font-size: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'battles:worldcup_list' %}">世界杯列表</a></li>
            <li class="breadcrumb-item"><a href="{% url 'battles:worldcup_detail' worldcup.id %}">{{ worldcup.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">对战记录</li>
        </ol>
    </nav>

    <!-- 页面头部 -->
    <div class="page-header">
        <h1 class="page-title">⚔️ {{ worldcup.name }} - 对战记录</h1>
        <p class="page-subtitle">查看所有常规赛对战记录和详细战报</p>
    </div>

    <!-- 统计信息 -->
    <div class="stats-container">
        <div class="stat-card">
            <div class="stat-number">{{ total_battles|default:0 }}</div>
            <div class="stat-label">总对战数</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ finished_battles|default:0 }}</div>
            <div class="stat-label">已完成</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ running_battles|default:0 }}</div>
            <div class="stat-label">进行中</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ pending_battles|default:0 }}</div>
            <div class="stat-label">等待中</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ error_battles|default:0 }}</div>
            <div class="stat-label">错误</div>
        </div>
    </div>

    <!-- 筛选器 -->
    <div class="filter-container">
        <form method="get">
            <div class="filter-row">
                <div class="form-group">
                    <label for="search">搜索用户</label>
                    <input type="text" class="form-control" id="search" name="search" value="{{ search_query }}" placeholder="输入用户名">
                </div>
                <div class="form-group">
                    <label for="status">对战状态</label>
                    <select class="form-control" id="status" name="status">
                        <option value="">全部状态</option>
                        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>等待中</option>
                        <option value="running" {% if status_filter == 'running' %}selected{% endif %}>进行中</option>
                        <option value="finished" {% if status_filter == 'finished' %}selected{% endif %}>已完成</option>
                        <option value="error" {% if status_filter == 'error' %}selected{% endif %}>错误</option>
                    </select>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn-filter">🔍 筛选</button>
                </div>
                <div class="form-group">
                    <a href="{% url 'battles:worldcup_battles' worldcup.id %}" class="btn-clear">🔄 清除</a>
                </div>
                <div class="form-group">
                    <button type="button" class="btn-refresh" onclick="window.location.reload()">
                        <i class="fas fa-sync-alt"></i> 刷新战报
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 对战记录列表 -->
    {% if page_obj %}
        {% for battle in page_obj %}
        <div class="battle-card">
            <div class="battle-header">
                <div class="battle-id">
                    <i class="fas fa-sword-cross"></i> 对战 #{{ battle.id }}
                </div>
                <div class="battle-status status-{{ battle.status }}">
                    {% if battle.status == 'pending' %}
                        ⏳ 等待中
                    {% elif battle.status == 'running' %}
                        ⚡ 进行中
                    {% elif battle.status == 'finished' %}
                        ✅ 已完成
                    {% elif battle.status == 'error' %}
                        ❌ 错误
                    {% endif %}
                </div>
            </div>

            <div class="battle-players">
                <div class="player">
                    <div class="player-name player1">
                        {{ battle.player1.username }}
                        {% if battle.result == 'player1_win' %}
                            <i class="fas fa-trophy" style="color: #FFD700; margin-left: 5px;"></i>
                        {% endif %}
                    </div>
                    <div class="player-score">{{ battle.player1_score|default:0 }}</div>
                </div>
                <div class="vs-divider">VS</div>
                <div class="player">
                    <div class="player-name player2">
                        {{ battle.player2.username }}
                        {% if battle.result == 'player2_win' %}
                            <i class="fas fa-trophy" style="color: #FFD700; margin-left: 5px;"></i>
                        {% endif %}
                    </div>
                    <div class="player-score">{{ battle.player2_score|default:0 }}</div>
                </div>
            </div>

            {% if battle.result %}
            <div class="battle-result">
                <span class="result-text result-{{ battle.result }}">
                    {% if battle.result == 'player1_win' %}
                        🏆 {{ battle.player1.username }} 获胜
                    {% elif battle.result == 'player2_win' %}
                        🏆 {{ battle.player2.username }} 获胜
                    {% elif battle.result == 'draw' %}
                        🤝 平局
                    {% elif battle.result == 'error' %}
                        ⚠️ 对战出错
                    {% endif %}
                </span>
            </div>
            {% endif %}

            <div class="battle-info">
                <div class="info-item">
                    <div class="info-label">创建时间</div>
                    <div class="info-value">{{ battle.created_at|date:"m-d H:i" }}</div>
                </div>
                {% if battle.started_at %}
                <div class="info-item">
                    <div class="info-label">开始时间</div>
                    <div class="info-value">{{ battle.started_at|date:"m-d H:i" }}</div>
                </div>
                {% endif %}
                {% if battle.finished_at %}
                <div class="info-item">
                    <div class="info-label">结束时间</div>
                    <div class="info-value">{{ battle.finished_at|date:"m-d H:i" }}</div>
                </div>
                {% endif %}
                <div class="info-item">
                    <div class="info-label">总回合数</div>
                    <div class="info-value">{{ battle.total_rounds|default:0 }}</div>
                </div>
            </div>

            <div class="battle-actions">
                <a href="{% url 'battles:battle_detail' battle.id %}" class="btn-detail">
                    <i class="fas fa-eye"></i> 查看详情 & 回放
                </a>
            </div>
        </div>
        {% endfor %}

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="对战记录分页">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">上一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">首页</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">上一页</span>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">下一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">末页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">下一页</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">末页</span>
                    </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    {% else %}
        <div class="empty-state">
            <div class="empty-icon">⚔️</div>
            <h3 class="empty-title">暂无对战记录</h3>
            <p class="empty-text">当前筛选条件下没有找到对战记录</p>
        </div>
    {% endif %}
</div>

{% endblock %}